<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>统计-学生统计-详情</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        #student-statistics-details .ssd-box-1 {
            color: #777777;
            font-size: 16px;
            padding: 20px 0;
        }

        #student-statistics-details .ssd-box-1>span {
            margin-right: 50px;
        }

        #student-statistics-details .ssd-title {
            color: #777777;
            font-size: 24px;
        }

        #student-statistics-details .ssd-red {
            color: #d01c25;
        }

        #student-statistics-details .ssd-box-2-title {
            font-size: 18px;
            font-weight: bold;
            margin: 40px 0 20px;
        }

        #student-statistics-details .ssd-box-2-item {
            display: flex;
        }

        #student-statistics-details .ssd-box-2-item>div {
            flex: 1;
        }
    </style>
    <script src="cs/jquery.min.js"></script>
    <script src="cs/echarts.min.js"></script>
    <script>
        $(function () {
            let name = decodeURI(GetQueryString("name"));
            let z = GetQueryString("z");
            let data = [];
            if(z){
                data = [23, 55, 10, 89, 33];
            }
            else{
                data = [80, 90, 50, 20, 88];
            }
            
            drawRadar(data, name);
            $(".ssd-title").html(name);
            $(".radar-item").each(function (i, d) {
                $(d).html(data[i]);
            });
        });
        //获取url参数
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
            var context = "";
            if (r != null)
                context = r[2];
            reg = null;
            r = null;
            return context == null || context == "" || context == "undefined" ? "" : context;
        }
        function drawRadar(data,name) {
            var main = document.getElementById("main");
            var myChart = echarts.init(main);
            var option = {
                tooltip: {},
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: '大数据采集', max: 100 },
                        { name: '大数据开发', max: 100 },
                        { name: '大数据可视化', max: 100 },
                        { name: '大数据清洗', max: 100 },
                        { name: '大数据运维', max: 100 },
                    ]
                },
                series: [{
                    name: name,
                    type: 'radar',
                    areaStyle: { normal: {} },
                    data: [
                        {
                            value: data,
                        }
                    ]
                }]
            };
            myChart.setOption(option);
        }

    </script>
</head>

<body class="inner_body">
    <div class="crumbs">
        <div class="index-img"></div>
        <a onclick="window.parent.location.reload();" href="javascript:void(0)" class="sy">首页</a><label>&gt;</label><a href="javascript:void(0)"
            class="mbx">教学统计</a>
    </div>
    </div>
    <div class="content_box">
        <div class="title_nav clearfix">
            <div class="title_box_select fl" id="table_one">
                <a href="teachingStatistics.html?active=1">教学统计</a>
            </div>
            <div class="title_box_select fl active" id="table_two">
                <a href="teachingStatistics.html?active=2">学生统计</a>
            </div>
        </div>
        <div class="panel">
            <div class="title_box_item active">
                <div id="student-statistics-details">
                    <div class="ssd-title">白同学</div>
                    <div class="ssd-box-1">
                        <span>
                            <span class="ssd-red">班级：</span>
                            <span>班级名称</span>
                        </span>
                        <span>
                            <span class="ssd-red">专业：</span>
                            <span>专业名称</span>
                        </span>
                        <span>
                            <span class="ssd-red">院系：</span>
                            <span>院系名称</span>
                        </span>
                    </div>
                    <div id="main" style="width:500px; height:300px;"></div>
                    <table class="table-style">
                        <thead>
                            <tr>
                                <th>能力类别</th>
                                <th>课程</th>
                                <th>课程类别</th>
                                <th>能力值</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>大数据采集</td>
                                <td>大数据概论</td>
                                <td>已开课</td>
                                <td class="radar-item">4.6</td>
                            </tr>
                            <tr>
                                <td>大数据开发</td>
                                <td>大数据概论</td>
                                <td>已开课</td>
                                <td class="radar-item">4.6</td>
                            </tr>
                            <tr>
                                <td>大数据可视化</td>
                                <td>大数据概论</td>
                                <td>已开课</td>
                                <td class="radar-item">4.6</td>
                            </tr>
                            <tr>
                                <td>大数据清洗</td>
                                <td>大数据概论</td>
                                <td>已开课</td>
                                <td class="radar-item">4.6</td>
                            </tr>
                            <tr>
                                <td>大数据运维</td>
                                <td>大数据概论</td>
                                <td>已开课</td>
                                <td class="radar-item">4.6</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="ssd-box-2">
                        <div>
                            <div class="ssd-box-2-title">理论课学习</div>
                            <div class="ssd-box-2-item">
                                <div>
                                    <span class="ssd-red">课件阅读次数：</span>
                                    <span>33</span>
                                </div>
                                <div>
                                    <span class="ssd-red">作业提交次数：</span>
                                    <span>18</span>
                                </div>
                                <div>
                                    <span class="ssd-red">作业提交率：</span>
                                    <span>94%</span>
                                </div>
                                <div>
                                    <span class="ssd-red">在线考试次数：</span>
                                    <span>3</span>
                                </div>
                                <div>
                                    <span class="ssd-red">考试及格率：</span>
                                    <span>66%</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="ssd-box-2-title">实验课学习</div>
                            <div class="ssd-box-2-item">
                                <div>
                                    <span class="ssd-red">实验笔记数：</span>
                                    <span>6</span>
                                </div>
                                <div>
                                    <span class="ssd-red">实验时长：</span>
                                    <span>5h</span>
                                </div>
                                <div>
                                    <span class="ssd-red">实验次数：</span>
                                    <span>12</span>
                                </div>
                                <div>
                                    <span class="ssd-red">实验报告提交数：</span>
                                    <span>4</span>
                                </div>
                                <div>
                                    <span class="ssd-red">实验报告提交率：</span>
                                    <span>33%</span>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div class="ssd-box-2-title">实验活跃度</div>
                            <div class="ssd-box-2-item">
                                <div>
                                    <span class="ssd-red">登录次数：</span>
                                    <span>28</span>
                                </div>
                                <div>
                                    <span class="ssd-red">进入课程次数：</span>
                                    <span>22</span>
                                </div>
                                <div>
                                    <span class="ssd-red">选课次数：</span>
                                    <span>38</span>
                                </div>
                                <div>
                                    <span class="ssd-red">提问问题数：</span>
                                    <span>3</span>
                                </div>
                                <div>
                                    <span class="ssd-red">回答问题数：</span>
                                    <span>0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>